<template>
  <dialog-with-search-selection
    ref="dialogWithSearchSelection"
    :visible.sync="visible"
    :title="title"
    :width="width"
    :entity-name="entityName"
    :search-selection-method="searchSelectionMethod"
    @save="save"
  >
    <el-table-column
      prop="name"
      label="姓名"
    />
  </dialog-with-search-selection>
  <!--

    调用
  <find-users
            ref="FindUsers"
            :multiple-selection.sync="multipleSelection"
          />

  this.$refs.FindUsers.open()

  -->
</template>

<script>
import dialogWithSearchSelection from '@/components/DialogWithSearchSelection'
import { mapActions } from 'vuex'

export default {
  components: { dialogWithSearchSelection },
  props: {
    requestParam: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      title: '选择用户',
      entityName: 'organizationUnit',
      searchSelectionMethod: 'FindUsers',
      visible: false,
      width: '800px',
      multipleSelection: [],

      organizationUnitId: null
    }
  },
  methods: {
    ...mapActions('organizationUnit', ['addUsersToOrganizationUnit']),

    open(requestParam) {
      this.organizationUnitId = requestParam && requestParam.organizationUnitId
      this.visible = true
      this.$nextTick(() => {
        this.$refs.dialogWithSearchSelection.initialize(requestParam)
      })
    },
    save(cb) {
      cb(multipleSelection => {
        return new Promise(async(resolve, reject) => {
          // 调用添加User api
          await this.addUsersToOrganizationUnit({ organizationUnitId: this.organizationUnitId, userIds: multipleSelection })
            .catch((err) => resolve(err))

          // 刷新父组件User 列表
          this.$emit('reloadUsersAndOU')

          this.$message({
            type: 'success',
            message: '添加成功'
          })

          // 把选择结果通过 :multiple-selection.sync="multipleSelection" 返回
          // this.$emit('update:multipleSelection', multipleSelection)
          resolve()
        })
      })
    }
  }
}
</script>
